<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../dist/vue.js"></script>
</head>
<body>
    <div>
        {{10+20}} <!-- 并不会解析。必须对vue初始化。给DOM元素一个id-->
    </div>

    <div id="box">{{10+20}}
            {{name}}
    </div>

    <div id="box">{{name}}</div> <!-- 再写一个 id="box"就不能解析模板语法： 一个页面中只能有一个id="box" -->

    <script>

        // 原生js中定义变量
        // var name = "zzz"

        var vm = new Vue({
            el:"#box",
            // 但在vue中定义变量。只需要放在关键字data这个固定属性中 ---- 称为状态(不再说变量)
            // 也就是说要修改name的值时：之前是找到DOM节点，修改innerHTML; 但在vue思想中,根本不需要操控DOM节点，只需要修改状态值就可以
            // 直接在控制台测试： vm    vm.name   vm.name = 'zzz'
            // 那vue是怎么来完成通过状态更新页面的呢？ 这就要了解vue的底层更新原理。
            data: {
                name:'jjj'
            }
        })
    </script>
</body>
</html>